import React, { useState } from 'react';
import { Checkbox } from 'antd';
import Editor from 'src/pages/AnalyseManage/EditReport/components/EditorStyleType/Editor';
import FormItem from 'antd/lib/form/FormItem';
import { filterObjectNullKeys } from 'src/libs/utils';

interface IProps {
	config: any;
	onValuesChange: ( chartType: string, key: string, values: Object, configType: string ) => void;
	form: any;
}

const PieTooltip = ( props: IProps ) => {
	const { config, onValuesChange, form } = props;

	const [ tooltipType, setTooltipType ] = useState( ( config.style && config.style.tooltipType ) || [ 'percent' ] );
	const fontConfig = [
		'fontFamily', 'fontSize', 'fontColor', 'fontBold', 'fontItalic'
	];

	const handleContentChange = ( value ) => {
		setTooltipType( value );
		form.setFieldsValue( { tooltipType: value } );
		onValuesChange( config.type, config.key, filterObjectNullKeys( form.getFieldsValue() ), 'style' );
	};

	const plainOptions = [
		{ label: '百分比', value: 'percent' },
		{ label: '数值', value: 'count' }
	];

	return (

		<div>
			<FormItem label="展示" name="tooltipType" initialValue={ tooltipType } labelAlign="left" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
				<Checkbox.Group options={plainOptions} defaultValue={ tooltipType } value={ tooltipType } onChange={ handleContentChange }>
				</Checkbox.Group>
			</FormItem>

			<FormItem label="字体" name="tooltipFont" labelAlign="left" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
				<Editor
					config={ config }
					form={ form }
					onValuesChange={ onValuesChange }
					fontFamilyName="tooltipFontFamily"
					fontSizeName="tooltipFontSize"
					fontColorName="tooltipFontColor"
					boldName="tooltipFontBold"
					italicName="tooltipFontItalic"
					fontConfig={ fontConfig }
				/>
			</FormItem>
		</div>

	);
};

export default React.memo( PieTooltip );
